<template>
  <div class="w-full statistical-center">
    <statisticalHeader />
    <div class="px-40px pb-60px m--9px flex flex-1 gap-10px flex-col">
      <div class="flex items-center gap-12px text-28px fw-700">
        <el-select v-model="schoolCode" placeholder="请选择所属园区" class="!w-160px">
          <el-option key="all" label="全部" value="all" />
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.SCHOOL_CODE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <span class="text-#404040">教师数量</span>
        <span class="text-#00CDE2">{{ pageData.total }}</span>
      </div>
      <div ref="echartWarpRef" class="flex gap-20px flex-1 flex-wrap" v-loading="loading">
        <div class="echart-card">
          <Echart
            :width="getViewportPx(600)"
            :height="getViewportPx(320)"
            :options="ageChartOption"
          />
        </div>
        <div class="echart-card">
          <Echart
            :width="getViewportPx(600)"
            :height="getViewportPx(320)"
            :options="tenureChartOption"
          />
        </div>
        <div class="echart-card">
          <Echart
            :width="getViewportPx(600)"
            :height="getViewportPx(320)"
            :options="educationChartOption"
          />
        </div>
        <div class="echart-card">
          <Echart
            :width="getViewportPx(600)"
            :height="getViewportPx(320)"
            :options="seniorityChartOption"
          />
        </div>
        <div class="echart-card">
          <Echart
            :width="getViewportPx(600)"
            :height="getViewportPx(320)"
            :options="technicalTitleChartOption"
          />
        </div>
        <div class="echart-card">
          <Echart
            :width="getViewportPx(600)"
            :height="getViewportPx(320)"
            :options="politicalStatusChartOption"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { getViewportPx } from '@/utils/formatter'
import { statisticalCenterApi } from '@/api/school/statisticalCenter/index'
import { useBarOptions } from '@/hooks/chart/useBarOptions'
import { usePieOptions } from '@/hooks/chart/usePieOptions'
import statisticalHeader from './components/statisticalHeader.vue'
const pageData: any = ref({})
const schoolCode = ref('all')
const loading = ref(true)
const init = async () => {
  try {
    loading.value = true
    pageData.value = await statisticalCenterApi.getTeacherReport(
      schoolCode.value === 'all' ? '' : schoolCode.value
    )
  } catch (error) {
    console.log(error)
  } finally {
    loading.value = false
  }
}
const getChartData = (baseData) => {
  return baseData
    ? Object.entries(baseData).map(([key, value]) => {
        return {
          name: key,
          value
        }
      })
    : []
}
const ageChartOption = computed(() => {
  return usePieOptions(getChartData(pageData.value?.ageDistribution), {
    title: {
      text: '年龄分布',
      left: 'center'
    }
  }).baseOptions
})
const tenureChartOption = computed(() => {
  return useBarOptions([], {
    title: {
      text: '入职年份分布',
      left: 'center'
    },
    legend: {
      textStyle: {
        fontSize: getViewportPx(24)
      }
    },
    series: [
      {
        barWidth: getViewportPx(28),
        data: getChartData(pageData.value?.tenureDistribution)
      }
    ]
  }).baseOptions
})
const educationChartOption = computed(() => {
  return usePieOptions(getChartData(pageData.value?.educationDistribution), {
    title: {
      text: '学历占比',
      left: 'center'
    }
  }).baseOptions
})
const seniorityChartOption = computed(() => {
  return usePieOptions(getChartData(pageData.value?.tenureDistribution), {
    title: {
      text: '教龄分布',
      left: 'center'
    }
    // series: [{
    //   roseType: 'area'
    // }]
  }).baseOptions
})
const technicalTitleChartOption = computed(() => {
  return useBarOptions([], {
    title: {
      text: '职称分布',
      left: 'center'
    },
    grid: {
      left: getViewportPx(92)
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      data: pageData.value?.technicalTitleDistribution
        ? Object.keys(pageData.value?.technicalTitleDistribution)
        : []
    },
    series: [
      {
        barWidth: getViewportPx(17),
        data: getChartData(pageData.value?.technicalTitleDistribution)
      }
    ]
  }).baseOptions
})
const politicalStatusChartOption = computed(() => {
  return usePieOptions(getChartData(pageData.value?.politicalStatusDistribution), {
    title: {
      text: '政治面貌分布',
      left: 'center'
    }
  }).baseOptions
})
watch(
  () => schoolCode.value,
  () => {
    init()
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
@import url('./index.scss');

.echart-card {
  padding: 15px 0;
}
</style>
